<template>
  <div class="layout-default">
    <div :style="{ height: barHeight + 'px' }"></div>
    <slot name="header"> </slot>
    <div class="body">
      <slot></slot>
    </div>
    <!-- #ifdef MP-WEIXIN -->
    <div :style="{ height: '40rpx' }"></div>
    <!-- #endif -->
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { getNavBarHeight } from "@/utils/systom";
const barHeight = computed(() => {
  return getNavBarHeight();
});
</script>

<style lang="scss" scoped>
.layout-default {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background-attachment: fixed;
  background: linear-gradient(to bottom, transparent, #fff 400rpx),
    linear-gradient(to right, #beecd8 30%, #f4e2d8);

  .body {
    flex: 1;
    overflow: auto;
  }
}
</style>
